<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      >
<head th:replace="fragments/tabhead::headc">
<!-- 	<link th:href="@{/js/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet"> -->
<!-- 	<script th:src="@{/js/plugins/zTree/js/jquery.ztree.core.js}"></script> -->
<!-- 	<script th:src="@{/js/plugins/zTree/js/jquery.ztree.excheck.js}"></script> -->
</head>

<body>

<th:block layout:fragment="content">
<div style="margin-top:15px">
  <form class="layui-form search" id="searchForm">
  <div class="layui-form-item layui-elem-quote">
    <div class="layui-inline">
      <label class="layui-form-label" style="width:100px">菜单名称</label>
      <div class="layui-input-inline" style="width:200px">
        <input type="text" name="name" class="layui-input" placeholder="请输入菜单名称"/>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" style="width:80px">url链接</label>
      <div class="layui-input-inline" style="width:100px">
        <input type="text" id="startDate" class="layui-input" name='url' placeholder="请输入url"/>
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-input-inline" style="width:150px;">
        <button class="layui-btn" id="searchBtn" type="button" >查询</button>
        <button class="layui-btn" id="addBtn" type="button" authcode="900014">新增</button>
      </div>
    </div>
  </div>
 </form>
</div>
<table class="layui-table"  id="tab" lay-filter="tab"></table>
<script>
var ins,editdialogindex,trobj;
$(function() {
	//start use
	layui.use('table', function(){
	  var table = layui.table;
	  //start render
	  ins=table.render({
		 elem:'#tab'
		 ,url:'/sys/menuManage/data?first=true'
		 ,cols:[[
			  {field:'id',width:80, sort: true,title:'菜单ID',fixed:'true'},
		      {field:'name', width:100,title:'菜单名称'},
		      {field:'status', width:100, sort: true,title:'是否可用',templet:'#statusTpl'},
		      {field:'url', width:180,title:'url地址'},
		      {field:'remark',width:80,title:'备注'},
		      {field:'super_id', width:180, sort: true,title:'上级菜单ID'},
		      {field:'type', width:100, sort: true,title:'菜单类型',templet:'#typeTpl'},
		      {field:'sort', width:80, sort: true,title:'排序'},
		      {field:'ctime', width:100, sort: true,title:'创建日期'},
		      {align:'center',fixed:'right',width:200, toolbar:'#toolbar',title:'操作'}
		 ]]
	    ,page: true //是否显示分页
	    ,limits: [10,20,50]
	    ,limit:10 //每页默认显示的数量
		,done:function(res,curr,count){
// 			 console.log(res);
			 page = curr;
			    //得到当前页码
			    console.log(curr); 
			    
			    //得到数据总量
			    console.log(count);
		}
	  });
	  //start table on
	  table.on("tool(tab)",function(obj) {
		  var data = obj.data;//当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值
		  trobj = obj;
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		  if(layEvent == 'edit'){
			  $.get('/sys/menuManage/edit?id='+data.id, {}, function(str){
					editdialogindex = layer.open({
										title:"修改菜单信息",
									    type: 1,
									    area: ['450px', '540px'],
									    content: str, //注意，如果str是object，那么需要字符拼接。
									    zIndex:10
									  });
									});
		  }
// 		  else if(layEvent == 'detail') {
// 			  $.get('/sys/menuManage/view?id='+data.id, {}, function(str){
// 				  editdialogindex = layer.open({
// 						title:"查看菜单信息",
// 					    type: 1,
// 					    area: ['380px', '520px'],
// 					    content: str, //注意，如果str是object，那么需要字符拼接。
// 					    zIndex:10
// 					  });
// 					});
// 		  }
		  else if(layEvent == 'del') {
			  layer.confirm('确定删除该行单据', {icon: 3, title:'提示'}, function(index){
			    		 //向服务端发送删除指令
			    		$.get('/sys/menuManage/del_execute?id='+data.id,{},function(result) {
			    			if(result.code == 200) {
			    				trobj.del(); //删除对应行（tr）的DOM结构
							    layer.close(index);
							    layer.msg(result.message,{icon: 6});
							    return false;
			    			}else{
			    			 layer.msg(result.message,{icon: 0});
			    			 layer.close(index);
			    			 return false;
			    			} 
			    		});
			      
			      });
		  }
	  });
	  //end table on
	  //页面新增
	  $("#addBtn").click(function() {
		  $.post('/sys/menuManage/addinit',function(str) {
			  editdialogindex = layer.open({
					title:"新增菜单",
					type:1,
					area:['450px', '540px'],
					content:str,
					zIndex:10
				});
		  });
	  });
	  //页面查询按钮 start search
	  $("#searchBtn").click(function(){
			var phone = $("input[name='phone']").val();
			var table = layui.table;
		    ins.reload({url: '/sys/menuManage/data',where:$("#searchForm").serializeJson()})
		    return false;
		});
	  //end search
	  
	});
	//end render
//end use
});
</script>
<script type="text/html" id="statusTpl">
{{#if (d.status==0){}}
  		正常
{{# }else if(d.status==1) {}}
		不可用
{{#  } }}
</script>
<script type="text/html" id="typeTpl">
{{#if (d.type==0){}}
  		目录菜单
{{# }else if(d.type==1) {}}
		功能菜单
{{#  } }}
</script>
<script type="text/html" id="toolbar">
	<a class="layui-btn layui-btn-mini" lay-event="edit" authcode="900017">修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del" authcode="900015">删除</a>
</script>
<!--<div th:replace="/department/model::modelDiv"></div>-->
<!-- <js th:replace="sys/menubutton/businessJs::businessJs"></js> -->
</th:block>
</body>
</html>